<template>
	<view class="dialog">
		<view class="password_code" v-if="stepStatus">
			<view class="tel_box">
				<view class="tel_word">手机号</view>
				<view class="tel_number_box">
					<text>{{phone}}</text>
					<view class="send_code_box">
						<view class="send_code" v-if="isShow" @click="start">发送验证码</view>
					</view>
				</view>
			</view>
			<view class="number_list">
				<view class="number_item" v-for="(item, index) in 6">{{password[index]}}</view>
			</view>
			<view class="send_info" v-if="!isShow">{{num}}s 后重新获取验证码</view>
		</view>
		<view class="password_number" v-else>
			<view class="password_title">{{title}}</view>
			<view class="password_num">
				<view class="password_zi" v-for="(item, index) in 6">
					<view :class="{'passwordOn':password[index]}"></view>
				</view>
			</view>
		</view>

		<view class="password_keyboard">
			<view class="digital_keyboard">
				<view class="keyboard_kuagn" v-for="(el,elindex) in numberBox">
					<view class="otherbg" v-if="el.id == 10"></view>
					<view class="delete" v-else-if="el.id == 12" @tap="deleteNum(el)"></view>
					<view v-else class="keyboard_num" @tap="clickNum(el)">{{el.num}} </view>
				</view>
			</view>
			<view style="width: 100%;height: 50rpx; "></view>
		</view>
	</view>
</template>

<script>
	import {
		setTradePassword,
		updateTradePassword,
		postSmsVerification,
		getSmsCode,
		setSmsTradePassword
	} from '@/api/api-v1-2.js'
	import {
		rsaEncrypt,
	} from '@/common/RSA.js'
	import {
		error
	} from '../../../../../components/jweixin-module'
	export default {
		data() {
			return {
				numberBox: [{
						id: 1,
						num: '1'
					},
					{
						id: 2,
						num: '2'
					},
					{
						id: 3,
						num: '3'
					},
					{
						id: 4,
						num: '4'
					},
					{
						id: 5,
						num: '5'
					},
					{
						id: 6,
						num: '6'
					},
					{
						id: 7,
						num: '7'
					},
					{
						id: 8,
						num: '8'
					},
					{
						id: 9,
						num: '9'
					},
					{
						id: 10,
						num: ''
					},
					{
						id: 11,
						num: '0'
					},
					{
						id: 12,
						num: ''
					},
				],
				passwordInfo: [{
						step: 0,
						title: '输入原6位交易密码'
					},
					{
						step: 1,
						title: '输入新6位交易密码'
					},
					{
						step: 2,
						title: '再次输入6位交易密码'
					},
				],
				step: 0,
				stepStatus: false, //true 电话验证码  false设置密码
				param: {
					code: '', //验证码
					oldPassword: '', //旧密码
					onePassword: '', //新密码 输入第一次
					twoPassword: '', //新密码 输入第二次
				},

				titleName: ['修改交易密码', '设置交易密码', '忘记交易密码'],
				password: '',
				name: '',
				title: '', //标题
				// 验证码参数
				phone: '',
				num: 60,
				isShow: true,
				shopId: null,
				match:null, //判断是否是比赛跳过来的
                pathType: '',//神椰合成跳过来的
			}
		},
		onLoad(e) {
			this.step = e.step
			if (this.step == 2) this.stepStatus = true
			this.name = this.titleName[this.step]
			this.title = this.passwordInfo[this.step].title
			this.setNavigationBarTitle(this.name)
			if (e.phone != undefined) {
				this.phone = e.phone
				// this.phone = '18876839987'
			}
			if (e.shopId != undefined) {
				this.shopId = e.shopId
			}
			if (e.match != undefined) {
				this.match = e.match
			}
            if (e.pathType != undefined) {
				this.pathType = e.pathType
			}
		},
		methods: {
			setNavigationBarTitle(title) {
				uni.setNavigationBarTitle({
					title: title
				})
			},
			// 倒计时
			async start() { //获取验证码
				let phone = this.phone
				// const res = await this.$api.sendCodeBtn(phone);
				const res = await getSmsCode(phone);
				uni.showToast({
					icon: 'none',
					title: '验证码发送成功'
				})
				this.getNum()
			},
			getNum: function() {
				this.isShow = false
				var interval = setInterval(() => {
					--this.num
				}, 1000)
				setTimeout(() => {
					clearInterval(interval)
					this.isShow = true
					this.num = 60
				}, this.num * 1000)
			},
			pay() {
				if (this.num == '' || this.num == 0) {
					uni.showToast({
						title: '请输入正确的参数！',
						icon: 'none'
					})
				} else {
					this.type = 'top'
				}
			},
			clickNum(key) {
				if (this.password.length < 6) {
					this.password += key.num
					if (this.password.length === 6) {
						// 0 修改密码 1无密码 设置新密码 2 忘记密码
						if (this.step == 0) {
							if (this.param.oldPassword == '') {
								this.param.oldPassword = this.password
								this.password = ''
								this.title = this.passwordInfo[1].title
								this.setNavigationBarTitle(this.titleName[1])
							} else if (this.param.onePassword == '') {
								this.param.onePassword = this.password
								this.password = ''
								this.title = this.passwordInfo[2].title
							} else if (this.param.onePassword != this.password) {
								this.$queue.showToast('密码不一致，请重新输入！')
								this.password = ''
								this.param.onePassword = ''
								this.title = this.passwordInfo[1].title
							} else if ((this.param.onePassword == this.password) && this.param.oldPassword != '') {
								let data = {
									newPassword: this.param.onePassword,
									oldPassword: this.param.oldPassword
								}
								let jiami = rsaEncrypt(JSON.stringify(data)) //rsa加密
								updateTradePassword({
									encryptData: jiami
								}).then(res => {
									console.log(res)
									if (res.code == 200) {
										this.$queue.showToast('修改成功')
										setTimeout(() => {
											uni.redirectTo({
												url: '/pages/my/set-up/set-up'
											})
										}, 1000)
									}

								}, error => {
									this.setNavigationBarTitle(this.titleName[0])
									this.title = this.passwordInfo[0].title
									this.password = ''
									this.param.onePassword = ''
									this.param.oldPassword = ''
								})
							}

						} else if (this.step == 1) { //1无密码 设置新密码
							if (this.param.onePassword == '') {
								this.param.onePassword = this.password
								this.password = ''
								this.title = this.passwordInfo[2].title
							} else if (this.param.onePassword != this.password) {
								this.$queue.showToast('密码不一致，请重新输入！')
								this.password = ''
								this.param.onePassword = ''
								this.title = this.passwordInfo[1].title
							} else if (this.param.onePassword == this.password) {
								// console.log('555')
								let data = {
									tradePassword: this.password
								}
								let jiami = rsaEncrypt(JSON.stringify(data)) //rsa加密
								setTradePassword({
									encryptData: jiami
								}).then(res => {
									if (res.code == 200) {
										this.$queue.showToast('设置成功')
										if (this.shopId != null) {
											setTimeout(() => {
												uni.redirectTo({
													url: '/pages/my/shenye-market/commodity-details/commodity-details?id=' +
														this.shopId
												})
											}, 1000)
										} 
										else if(this.match != null){
											setTimeout(() => {
												uni.navigateBack({
													delta: 1
												});
											}, 1000)

										}
                                        else if(this.pathType != null){
                                        	setTimeout(() => {
                                        		uni.navigateBack({
                                        			delta: 1
                                        		});
                                        	}, 1000)
                                        
                                        }
										else {
											setTimeout(() => {
												uni.redirectTo({
													url: '/pages/my/set-up/set-up'
												})
											}, 1000)
										}

									}

								}, error => {
									console.log(error)
								})
							}

						} else if (this.step == 2) {//2 忘记密码

							if (this.param.code == '') {
								postSmsVerification({
									code: this.password
								}).then(el => {
									this.param.code = el.result
									this.password = ''
									this.setNavigationBarTitle(this.titleName[1])
									this.stepStatus = false
									this.title = this.passwordInfo[1].title
								}, e => {
									this.password = ''
								})
							} else if (this.param.onePassword == '') {
								this.param.onePassword = this.password
								this.password = ''
								this.title = this.passwordInfo[2].title
							} else if (this.param.onePassword != this.password) {
								this.$queue.showToast('密码不一致，请重新输入！')
								this.password = ''
								this.param.onePassword = ''
								this.title = this.passwordInfo[1].title
							} else if ((this.param.onePassword == this.password) && this.param.code != '') {
								let data = {
									code: this.param.code,
									tradePassword: this.param.onePassword
								}
								let jiami = rsaEncrypt(JSON.stringify(data)) //rsa加密
								setSmsTradePassword({
									// code: this.param.code,
									// tradePassword: this.param.onePassword
									encryptData: jiami
								}).then(res => {
									if (res.code == 200) {
										this.$queue.showToast('修改成功')
										setTimeout(() => {
											uni.redirectTo({
												url: '/pages/my/set-up/set-up'
											})
										}, 1000)
									}

								}, error => {
									this.stepStatus = true
									this.param.code = ''
									this.param.onePassword = ''
									this.password = ''
								})
							}

						}
						// this.$emit('determine',this.password)
						// console.log(this.password, '37')
						// this.$.open('/trait/details');
					}
				}
			},
			deleteNum() {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1)
				}
			}
		}
	}
</script>

<style scoped>
	page {
		height: 100%;
		background: #F8FBFF;
	}

	.dialog {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.password_keyboard {
		position: fixed;
		bottom: 0;
		width: 100%;
		/* height: 778rpx; */
		background: #F5F5F6;
	}

	.password_title {
		font-size: 32rpx;
		color: #222222;
		width: 100%;
		text-align: center;
		padding: 100rpx 0 60rpx;
	}

	.password_num {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.password_zi:first-child {
		border-left: 2rpx solid #A5A8BB;
	}

	.password_zi {
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 116rpx;
		height: 116rpx;
		border-top: 2rpx solid #A5A8BB;
		border-bottom: 2rpx solid #A5A8BB;
		border-right: 2rpx solid #A5A8BB;
	}

	.passwordOn {
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		background: #222222;
	}

	.digital_keyboard {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		background: #ffffff;
	}

	.keyboard_kuagn {
		font-size: 56rpx;
		color: #030303;
		width: 248rpx;
		height: 108rpx;
		background: #fff;

		border-top: 2rpx solid #F5F5F6;
		border-right: 2rpx solid #F5F5F6;
		/* border-bottom: 2rpx solid #F5F5F6; */
	}

	.delete {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background: #F5F5F6 url('/static/index/activity/delete.png') no-repeat;
		background-size: 100% 100%;
	}

	.otherbg {
		width: 100%;
		height: 100%;
		background: #F5F5F6;
	}

	.keyboard_num {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.keyboard_num:active{
		background: rgba(0, 0, 0, 0.1);
	}
	/* 验证码 */
	.password_code {}

	.tel_box {
		width: 100%;
		padding: 100rpx 60rpx 60rpx 60rpx;
		box-sizing: border-box;
	}

	.tel_word {
		font-size: 32rpx;
		color: #222222;
	}

	.tel_number_box {
		width: 100%;
		margin-top: 12rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.tel_number_box text {
		font-size: 58rpx;
		color: #222222;
	}

	.send_code_box {
		width: 180rpx;
		height: 68rpx;
	}

	.send_code {
		width: 100%;
		height: 100%;
		border: 1rpx solid #1053FF;
		border-radius: 4rpx;
		font-size: 28rpx;
		color: #1053FF;
		line-height: 68rpx;
		text-align: center;
	}

	.number_list {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.number_list .number_item {
		width: 96rpx;
		height: 96rpx;
		text-align: center;
		line-height: 96rpx;
		color: #000000;
		font-size: 48rpx;
		border-bottom: 2rpx solid #888888;
	}

	.send_info {
		margin-top: 46rpx;
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		color: #333333;
		font-size: 28rpx;
	}
</style>
